<template>
  <div>
    <CellGroup>
      <Cell title="我的SIM卡列表"/>
      <Empty v-if="simData.length===0" description="暂无数据" />
      <Cell v-for="item in simData" :label="item.iccid" :key="item.iccid">
        <template #title>
          <span v-if="item.status===0" class="custom-title">未实名</span>
          <span v-if="item.status===1" class="custom-title nameing">实名认证中</span>
          <span v-if="item.status===2" class="custom-title named">已实名</span>
          <span v-if="item.firstStatus===0" class="custom-title margin-left-10">未首充</span>
          <span v-if="item.firstStatus === 1" class="custom-title margin-left-10 named">已首充</span>
        </template>
        <template #right-icon>
          <div v-if="item.firstStatus!==0">
            <Button v-if="item.status===2" size="mini" type="warning" @click="pageJump('flowOrder',item.iccid)">流量订购</Button>
            <Button v-if="item.status===2" size="mini" type="info" @click="pageJump('flowSearch',item.iccid)">流量查询</Button>
          </div>
          <div style="margin-left: 5px">
            <Button v-if="!item.status||item.status===1" size="mini" type="danger" @click="pageJump('realName',item.iccid)">实名认证</Button>
            <Button v-if="item.firstStatus===0" size="mini" type="primary" @click="pageJump('bill',item.iccid)">首充激活</Button>
            <Button v-if="item.firstStatus!==0" size="mini" plain type="warning" @click="pageJump('flowSearch',item.iccid)">查询余额</Button>
          </div>
        </template>
      </Cell>
    </CellGroup>
    <div style="margin:40px 0;padding: 0 20px">
      <van-button type="warning" style="width: 100%" icon="plus" @click="()=>{
        $router.push('/sim/add')
      }">添加SIM卡
      </van-button>
      <div class="tips">1、每个人最多可绑定10张卡</div>
      <div class="tips">2、SIM卡必须完成实名认证和首充激活才能使用</div>
    </div>
<!--    <van-button @click="unBind">解绑实名-test</van-button>-->
  </div>
</template>

<script>
  import {Cell, CellGroup, Button,Empty} from 'vant';
  import {getCardList, unbindCard} from "../../api/user";

  export default {
    name: "index",
    components: {Cell, CellGroup, Button,Empty},
    data() {
      return {
        simData: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      async getList(){
        const res = await getCardList()
        const temp = res.data.map(item=>{
          return {
            status:item.realStatus,  //0是未实名，1是实名中，2是已实名
            iccid:item.iccid,
            firstStatus:item.firstStatus
          }
        })
        this.simData = temp
      },
      pageJump(value,iccid) {
        switch (value) {
          case 'realName':
            this.$router.push('/realNameList?iccid='+iccid)
            break;
          case 'flowOrder':
            this.$router.push('/order?iccid='+iccid)
            break;
          case 'flowSearch':
            this.$router.push('/order/search?iccid='+iccid)
            break;
          case 'bill':
            this.$router.push('/bill?iccid='+iccid)
            break;
        }
      },
      unBind(){
        unbindCard({sim:'8986031947208269401',simType:'ICCID'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .custom-title {
    color: red;
  }
  .nameing{
    color: coral;
  }
  .named {
    color: #07c160;
  }
  .margin-left-10{
    margin-left: 10px;
  }
  .tips {
    margin-top: 5px;
    /*text-align: center;*/
    color: #969799;
  }
</style>
